<template>
  <div class="container">
    <div class="loginBox">
<!--   ref:   biao dan gua zai duixiang-->
      <a-form-model ref="loginFormRef" :rules="rules" :model="formdata" class="loginForm">
        <a-form-model-item prop="username">
          <a-input v-model="formdata.username" placeholder="please enter your username">
            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>

        <a-form-model-item prop="password">
          <a-input v-model="formdata.password" type="password" v-on:keyup.enter="login" placeholder="please enter your password">
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>

        <a-form-model-item class="loginButton">
          <a-button type="primary" style="margin-right: 50px" @click="login()">login</a-button>
          <a-button type="info" @click="resetForm">cancel</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>

</template>

<script>
export default {
  name: "Login",
  data(){
    return {
      formdata: {
        username: '',
        password: ''
      },
      rules: {
        username: [
            { required: true, message: '请输入用户名!',tigger:'blur' },
            { min:3,max:10,message: 'length should be 3 to 10',tigger: 'blur'},
        ],
        password: [
          { required: true, message: '请输入密码!',tigger:'blur' },
          { min:3,max:10,message: 'length should be 3 to 10',tigger: 'blur'},
        ]
      }
    }
  },
  methods:{
    resetForm(){
      this.$refs.loginFormRef.resetFields()
    },
    login(){
<<<<<<< HEAD
      //这里用了异步操作
      this.$refs.loginFormRef.validate(async valid=>{
=======
      this.$refs.loginFormRef.validate(valid=>{
>>>>>>> origin/master
        console.log(valid)
        if (!valid){
          this.$refs.loginFormRef.resetFields()
          return this.$message.error("data valid error")
        }
<<<<<<< HEAD
        const {data:res} =await this.$http.post('login',this.formdata)
        if (res.status != 200) return this.$message.error(res.message)
        //存储数据,loacalSorage关闭后就不用重新登陆，sessionStorage关闭后要重新登陆
        window.sessionStorage.setItem('token',res.token)
        this.$router.push('admin/index')
=======
        const res = this.$http.post('login',this.formdata)
>>>>>>> origin/master
        console.log(res)
      })
    }
  }
}

</script>

<style scoped>
.container{
  height: 100%;
  background-color: #282c34;
}

.loginBox{
  width: 450px;
  height: 300px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 9px;
}

.loginForm{
  width: 100%;
  position: absolute;
  bottom: 10%;
  padding: 0 80px;
  box-sizing: border-box;
}

.loginButton{
  display: flex;
  justify-content: center;
}

</style>